<template>
  <div class="foot">
    <router-link to="/" exact>
      <div class="icon icon-index"></div>
      <div class="name">藏品</div>
    </router-link>
    <router-link to="/course">
      <div class="icon icon-course"></div>
      <div class="name">课程</div>
    </router-link>
  </div>
</template>
<script setup>

</script>
<style scoped lang="scss">
@import '@/assets/style/global.scss';
.foot {
  position: fixed;
  z-index: 9;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  //border-top: 1PX solid #edd8b9;
  background-color: #020914;
  a {
    float: left;
    width: 50%;
    text-align: center;
    position: relative;
    height: 200px;
    padding-top: 30px;
    .name {font-size: 36px; margin-bottom: 3px;color:#b6af9f;}
    .icon { width: 70px;height:70px;background-repeat: no-repeat;
      background-size: contain;margin: 8px auto 17px auto; background-position: center;}
    .icon-index { background-image: url('@/assets/tab1.png'); }
    .icon-course { background-image: url('@/assets/tab2.png'); }
    &.router-link-active {
      .name {color:#f5ead0;}
      .icon-index { background-image: url('@/assets/tab1-a.png'); }
      .icon-course { background-image: url('@/assets/tab2-a.png'); }
    }

  }
}
</style>
